<template>
	<div>
		<div class="container">
			<el-row>
				<el-card
					class="room-card"
					v-for="room in roomBedList"
					:key="room.location"
				>
					<div class="center-align margin-bottom">
						<el-tag
							size="small"
							type="primary"
							style="margin-top: 15px; margin-bottom: 10px"
							plain
						>
							{{ room.location }}号房
						</el-tag>
					</div>
					<el-row class="margin-bottom">
						<el-col :span="8" v-for="bed in room.bed" :key="bed">
							<el-card v-if="bed.name === null" class="bed-card center">
								<div class="text-title line-in-card" style="height: 7em">
									<el-tag type="success" size="small">
										{{ bed.queNumber }}
									</el-tag>
									{{ bed.name }}
								</div>
							</el-card>
							<el-card
								v-else
								class="bed-card color-card"
								body-style="height: 6em; width: 5em"
								@click=detail(bed)
							>
								<div class="text-title line-in-card">
									<el-tag type="success" size="small">
										{{ bed.queNumber }}
									</el-tag>
									 {{ bed.name }}
								</div>
								<div class="text line-in-card">
									{{ bed.gender }} {{ bed.age }}岁 {{ bed.day }}天
								</div>
								<el-tag
									effect="plain"
									size="mini"
									v-for="i in bed.condition"
								>{{ i }}
								</el-tag>
							</el-card>
						</el-col>
					</el-row>
				</el-card>
				<div v-if="dialogVisible">
					<el-dialog v-model="dialogVisible" width="50%">
						<Patient :patientObj=patientObj></Patient>
					</el-dialog>
				</div>
			</el-row>
		</div>
	</div>
</template>

<script>
import {computed, ref} from "vue";
import Patient from "../components/Patient.vue";
import {useStore} from "vuex";

export default {
	components: {Patient},
	setup() {
		const store = useStore();
		store.commit("refresh");
		const dialogVisible = ref(false);
		const roomBedList = computed(() => store.state.roomBedList);
		let patientObj = ref(null);
		const detail = (patient) => {
			patientObj.value = patient;
			dialogVisible.value = true;
		}
		console.log(roomBedList.value)
		return {
			dialogVisible,
			roomBedList,
			patientObj,
			detail,
		};
	},
};
</script>

<style scoped>
.margin-bottom {
	margin-bottom: 5px;
}

.room-id {
	margin-left: 6px;
}

.room-card {
	min-width: 18%;
	width: 18%;
	margin-left: 6px;
	margin-right: 6px;
	margin-bottom: 10px;
	padding-bottom: 5px;
}

.bed-card {
	min-width: 65px;
	width: 85%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}

:deep(.el-card__body) {
	padding: 2px;
}

.bed-card:hover {
	margin-top: -5px;
	padding: 0;
}

.color-card {
	background-color: rgb(221, 236, 253);
}

.text-title {
	margin-top: 5px;
	font-size: 12px;
}

.null-bed {
	font-size: 12px;
	text-align: center;
	padding: 40%;
}

.text {
	font-size: 12px;
}

.line-in-card {
	margin-bottom: 5px;
}

.center {
	align: middle;
	text-align: center;
	vertical-align: middle;
}

.center-align {
	text-align: center;
}

.dialog :deep(.el-dialog__wrapper) {
	background-color: rgba(0, 0, 0, 0.8);
}
</style>
